import currentOrder from './current-order.mjs';
import pendingOrder from './pending-order.mjs';
import paidOrder from './paid-order.mjs';
import cancelledOrder from './cancelled-order.mjs';

import mainMenu from './main-menu.mjs';
import frequecyOrder from './frequently-food.mjs';

import {store} from '../store/store.js'

export default {
    

    template: `
    <div id="app">
        <div class="container">
            <div class="order-sheet">
                <h2 class="mtb10">订单栏</h2>
                <div class="order-title flex mtb10">
                    <p @click="orderChange('current-order')"  :class="orderFlag=='current-order'?'underline':''" style="cursor:pointer">当前订单</p@click=>
                    <p @click="orderChange('pending-order')"  :class="orderFlag=='pending-order'?'underline':''" style="cursor:pointer">挂单中</p>
                    <p @click="orderChange('paid-order')"  :class="orderFlag=='paid-order'?'underline':''" style="cursor:pointer">已付款</p>
                    <p @click="orderChange('cancelled-order')" :class="orderFlag=='cancelled-order'?'underline':''" style="cursor:pointer">取消的订单</p>
                </div>
                <component :is="orderFlag" ></component>
            </div>

            <div class="product-sheet">
                <h2>产品栏</h2>
                <div class="menu-title flex">
                    <div @click="proChange('frequently-food')" :class="toggleFlag=='frequently-food'?'underline':''">常点食品</div>
                    <div @click="proChange('main-menu')"  :class="toggleFlag=='main-menu'?'underline':''">主菜单</div>
                </div>
                <component :is="toggleFlag" ></component>
            </div>
        </div>

    </div>
    
    `,
   
    components: {
        "current-order": currentOrder,
        "pending-order":pendingOrder,
        "paid-order": paidOrder,
        "cancelled-order":cancelledOrder,
        "frequently-food": frequecyOrder,
        "main-menu":mainMenu,
    },
    store: store,
    computed: {
        toggleFlag() {
            return this.$store.state.toggleFlag;
        },
        orderFlag() {
            return this.$store.state.orderFlag;
        }
    },
    methods: {
        orderChange(name) {
            this.$store.dispatch("orderChange", name);
        },
        proChange(name) {
            this.$store.dispatch("proChange", name);
        }
    },
}